<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
    <style>
        .setTime{
            text-align: center;            
            height: 100%;
            width: 100%;
            position: relative;
            z-index: 100;
            
        }
        /* .kuang{
            position: fixed;
            display: none;
            height: 1000px;
            width: 100%;
            float: left;
            background: grey;
            opacity: 0.3;
            z-index: 100;
            top: 0px;
        }
        .xkuang{
            margin-top: 100px;
            width: 500px;
            height: 400px;
            margin:0 auto;
            background: red;
            position: fixed;
            top: 50%;
            left: 50%;           
            z-index: 1000;   
            display: none;
            margin-left:-22%;

        } */
       .wkuang{
           position: absolute;
           top:0;
           left:0;
           opacity: 0.3;
           z-index: 500;
           width: 100%;
           height: 100%;
           background: gray;
           /* display: none; */
       }
       .kuang{
           margin: 100px auto;
           width: 150px;
           height: 100px;
           background: rgb(196, 16, 16);
           z-index:1000;
           font-size: 10px;
           text-align: center
       }
       .kuang>input{
            width: 50px;
            height: 5px;
            margin: 10px 0  10px 0 ;
            outline: 0
       }
       button{
           margin:10px 50px 10px;
           width: 30px;
           height: 10px;
           font-size: 6px;
           line-height: 5px;
           display: block;
           padding: 1px 0 1px 0;
           color: wheat;
           background: rgb(11, 177, 52);
       }
    </style>
</head>
<body>
    <div class="setTime"></div>
    <!-- <div class="">
         <div class="kuang"></div>
        <div class="xkuang">
            <div>
                学号:<input type="text">
                姓名:<input type="text">
            </div>
        </div>       
    </div> -->
    <div class="wkuang">
        <div class="kuang">
            用户名：<input type="text"><br>
            &nbsp;密  码&nbsp;：<input type="password"><br>
            <button>登录</button>
        </div>
    </div>
</body>
<script src="../js/jquery-3.2.1.js"></script>
<script>
    var n=2;
    fun();
    function fun(){
        if(n>0){
            n--;
            //找到div的位置，将字幕放进去
            $(".setTime").html(`请在${n}秒内完成支付，超时订单会自动取消`)
        }else{
            clearInterval(qq);                  
            $(".wkuang").css("display","block")
            //alert("已超过支付时间，订单自动取消")
           
        }
    }
    var qq=setInterval(fun,1000)
    
    
</script>
</html>